<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>数据表格的重载 - 数据表格</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/stv/admin/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/stv/admin/layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>组件</cite></a>
        <a><cite>数据表格</cite></a>
        <a><cite>数据表格的重载</cite></a>
    </div>
</div>

<div class="layui-fluid layui-form-pane" >
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">用户中心</div>

                <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                    <div class="layui-form-item">

                        <div class="layui-inline">
                            <div class="layui-btn-group form_quick_date">
                                <a class="layui-btn layui-btn-primary" data-type="1"
                                   onclick="form_do_set_day(1,null,null)">今天</a>
                                <a class="layui-btn layui-btn-primary" data-type="2"
                                   onclick="form_do_set_day(2,null,null)">昨天</a>
                                <a class="layui-btn layui-btn-primary" data-type="3"
                                   onclick="form_do_set_day(3,null,null)">本周</a>
                                <a class="layui-btn layui-btn-primary" data-type="4"
                                   onclick="form_do_set_day(4,null,null)">上周</a>
                                <a class="layui-btn layui-btn-primary" data-type="5"
                                   onclick="form_do_set_day(5,null,null)">本月</a>
                                <a class="layui-btn layui-btn-primary" data-type="6"
                                   onclick="form_do_set_day(6,null,null)">上月</a>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label layui-hide-md">注册日期</label>
                            <div class="layui-input-inline" style="width:100px;">
                                <input type="text" class="layui-input" id="search_start_date" name="start_date"
                                       autocomplete="off"
                                       format="date" placeholder="注册开始日期">
                            </div>
                            <div class="layui-form-mid">
                                -
                            </div>
                            <div class="layui-input-inline" style="width:100px;">
                                <input type="text" class="layui-input" id="search_end_date" name="end_date"
                                       autocomplete="off"
                                       format="date" placeholder="注册结束日期">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">行为</label>
                            <div class="layui-input-inline">
                                <select name="action_id" >

                                    <option value=""></option>
                                    {foreach $actionList as $k=>$v }
                                      <option value="{$v['id']}">{$v['title']}</option>
                                    {/foreach}
                                </select>
                            </div>
                        </div>




                        <div class="layui-inline">
                            <button class="layui-btn layui-btn-normal" lay-submit lay-filter="LAY-app-contlist-search">
                                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>搜索
                            </button>

                        </div>
                    </div>
                </div>


                <div class="layui-card-body">
                    <table class="layui-hide" id="test-table-reload" lay-filter="user"></table>
                    <script type="text/html" id="test-table-operate-barDemo">
                        <div class="layui-btn-group">

                            <button class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</button>
                        </div>
                    </script>
                </div>
            </div>

        </div>
    </div>
</div>

<script src="/static/stv/admin/layuiadmin/layui/layui.js?{{time()}}"></script>
<script src="/static/stv/admin/js/admin.common.js?{{time()}}"></script>
<script>
    var index_url='{:url('admin/actionlog/index')}';  //列表
    var add_url='{:url('admin/action/add')}';       //添加
    var edit_url='{:url('admin/action/edit')}';   //编辑
    var del_url='{:url('admin/actionlog/del')}';      //删除
    var form_id="main_form";
    layui.config({
        base: '/static/stv/admin/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'laydate', 'table'], function(){
        var $ = layui.$
            ,admin = layui.admin
            ,element = layui.element
            , laydate = layui.laydate
            ,form = layui.form;
        var table = layui.table;

        //=========================表单搜索搜索========================
        form.on('submit(LAY-app-contlist-search)', function(data){

            var field = data.field;
            console.log(field);
            //
            // //执行重载
            table.reload('test-table-reload', {
                where: field
            });
        });
        $('.layui-btn.layuiadmin-btn-list').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //===================表格渲染========================
        table.render({
            elem: '#test-table-reload'
            ,url: index_url
            ,method:'post'
            ,cols: [[
                {field:'id', title: 'ID', width:80, sort: true}
                ,{field:'action_name', title: '行为名称', width:180, sort: true}
                ,{field:'account', title: '执行者', width:120, sort: true}
                ,{field:'action_ip', title: 'IP', width:120, sort: true,templet:temp_ip_tpl}
                ,{field:'create_time', title: '执行时间', width:160, sort: true, templet: layui_table_time_tpl_1}
                ,{field: 'remark', title: '描述', width: 400, sort: true}
                ,{width:100, title: '操作', align:'center', fixed: 'right', toolbar: '#test-table-operate-barDemo'}
            ]]
            //进行按钮操作
            ,page: true
            ,done: function(res, curr, count){
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                console.log(res);

                //得到当前页码
                console.log(curr);

                //得到数据总量
                console.log(count);
            }
        });
//监听工具条
        table.on('tool(user)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象

            if(layEvent === 'role'){ //查看
                //提交数据
                var index = layer.open({
                    type: 2
                    , title: '分配角色:' + data.title
                    , content: role_url + "?uid=" + data.uid
                    , area: ['500px', '330px'] //宽高
                    , maxmin: true
                    , scrollbar: true
                    , end: function (index, layero) {
                        //关闭弹窗后的事件
                    }
                });

                //do somehing
            } else if(layEvent === 'del'){ //删除

                layer.confirm('确定删除吗?', function (index) {
                    //提交数据
                    //提交数据
                    var o = {id: data.id};
                    $.post(del_url, o, function (res) {
                        try {
                            if (res.status == 200) {
                                //重新刷新父窗口的数据区
                                table.reload('test-table-reload'); //重载表格
                            } else {
                                layer.msg(res.message);
                            }
                        } catch (e) {
                            layer.msg("异常");
                        }
                    },'json');

                    //关闭自身提示框
                    layer.close(index);
                });

            } else if(layEvent === 'edit'){ //编辑
                layer.open({
                    type: 2,
                    title: '编辑:'+data.title,
                    shade: false,
                    area: ['70%', '500px'], //宽高
                    content: edit_url+'?id='+data.id,
                    zIndex: layer.zIndex //重点1
                    ,btn: ['保存', '取消']
                    ,yes: function(index, layero){
                        //点击确认触发 iframe 内容中的按钮提交
                        var submit = layero.find('iframe').contents().find("#form_save");
                        submit.click();
                    }
                    ,success: function(layero){
                        layer.setTop(layero); //重点2
                    }
                });
            }
        });
        var $ = layui.$, active = {
            reload: function(){
                var demoReload = $('#test-table-reload');
                //执行重载
                table.reload('test-table-reload', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        uid: demoReload.val()
                    }
                });
            },
            add: function(){
                layer.open({
                    type: 2
                    ,title: '添加行为'
                    ,content: add_url
                    ,maxmin: true
                    ,area: ['750px', '550px']
                    ,btn: ['确定', '取消']
                    ,yes: function(index, layero){
                        //点击确认触发 iframe 内容中的按钮提交
                        var submit = layero.find('iframe').contents().find("#form_save");
                        submit.click();
                    }
                });
            }
        };

        var insStart = laydate.render({
            elem: '#search_start_date'
            , type: 'date'
            , format: 'yyyy-MM-dd'
            //, min: 0
            , done: function (value, date) {
                //更新结束日期的最小日期
                insEnd.config.min = lay.extend({}, date, {
                    month: date.month - 1
                });
                //自动弹出结束日期的选择器
                insEnd.config.elem[0].focus();
            }
        });

        //结束日期
        var insEnd = laydate.render({
            elem: '#search_end_date'
            , type: 'date'
            , format: 'yyyy-MM-dd'
            //, min: 0
            , done: function (value, date) {
                //更新开始日期的最大日期
                insStart.config.max = lay.extend({}, date, {
                    month: date.month - 1
                });
            }
        });
        form_do_set_day(1, null, null);

    });

    function temp_switch_tpl(d){
        if(d.status==1){
            return '<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭" checked>';
        }else{
            return '<input type="checkbox" name="zzz" lay-skin="switch" lay-text="开启|关闭">';
        }
    }
    function temp_ip_tpl(d){
        return _int2iP(d.action_ip);
    }
    function _int2iP(num)
    {
        var str;
        var tt = new Array();
        tt[0] = (num >>> 24) >>> 0;
        tt[1] = ((num << 8) >>> 24) >>> 0;
        tt[2] = (num << 16) >>> 24;
        tt[3] = (num << 24) >>> 24;
        str = String(tt[0]) + "." + String(tt[1]) + "." + String(tt[2]) + "." + String(tt[3]);
        return str;
    }
</script>
</body>
</html>
